<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}管理后台 - 万岛潜水{% endblock %}</title>
    <!-- 使用国内CDN -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.8.1/font/bootstrap-icons.min.css" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
    <style>
        :root {
            --primary-color: #3a7bd5;
            --secondary-color: #00d2ff;
            --dark-color: #2c3e50;
            --light-color: #f8f9fa;
            --success-color: #2ecc71;
            --warning-color: #f39c12;
            --danger-color: #e74c3c;
            --info-color: #3498db;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f5f7fb;
            color: #333;
        }
        
        /* 侧边栏样式 */
        .sidebar {
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            width: 250px;
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            z-index: 1000;
            transition: all 0.3s;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
        }
        
        .sidebar-header {
            padding: 20px;
            background: rgba(0, 0, 0, 0.1);
        }
        
        .sidebar .nav-link {
            color: rgba(255, 255, 255, 0.85);
            padding: 12px 20px;
            margin: 5px 10px;
            border-radius: 5px;
            transition: all 0.3s;
            font-weight: 500;
        }
        
        .sidebar .nav-link:hover {
            background: rgba(255, 255, 255, 0.15);
            color: white;
            transform: translateX(5px);
        }
        
        .sidebar .nav-link.active {
            background: white;
            color: var(--primary-color);
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        
        .sidebar .nav-link i {
            margin-right: 10px;
            width: 20px;
            text-align: center;
        }
        
        /* 主内容区域 */
        .main-content {
            margin-left: 250px;
            padding: 20px;
            transition: all 0.3s;
        }
        
        /* 卡片样式 */
        .card {
            border: none;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s, box-shadow 0.3s;
            margin-bottom: 20px;
            overflow: hidden;
        }
        
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }
        
        .card-header {
            background-color: white;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            font-weight: 600;
            padding: 15px 20px;
        }
        
        .card-body {
            padding: 20px;
        }
        
        /* 统计卡片 */
        .stats-card {
            border-radius: 10px;
            padding: 20px;
            height: 100%;
            position: relative;
            overflow: hidden;
            color: white;
        }
        
        .stats-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, rgba(0,0,0,0.1), rgba(0,0,0,0));
            z-index: 1;
        }
        
        .stats-card-content {
            position: relative;
            z-index: 2;
        }
        
        .stats-card-primary {
            background: linear-gradient(45deg, #3a7bd5, #00d2ff);
        }
        
        .stats-card-success {
            background: linear-gradient(45deg, #2ecc71, #26c281);
        }
        
        .stats-card-info {
            background: linear-gradient(45deg, #3498db, #2980b9);
        }
        
        .stats-card-warning {
            background: linear-gradient(45deg, #f39c12, #f1c40f);
        }
        
        .stats-icon {
            font-size: 3rem;
            opacity: 0.8;
            position: absolute;
            bottom: 10px;
            right: 10px;
        }
        
        /* 表格样式 */
        .table {
            border-collapse: separate;
            border-spacing: 0;
        }
        
        .table thead th {
            background-color: #f8f9fa;
            border-top: none;
            border-bottom: 2px solid #dee2e6;
            font-weight: 600;
            color: #495057;
        }
        
        .table tbody tr {
            transition: background-color 0.3s;
        }
        
        .table tbody tr:hover {
            background-color: #f8f9fa;
        }
        
        /* 按钮样式 */
        .btn {
            border-radius: 5px;
            padding: 8px 16px;
            font-weight: 500;
            transition: all 0.3s;
        }
        
        .btn-primary {
            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
            border: none;
        }
        
        .btn-primary:hover {
            background: linear-gradient(45deg, var(--secondary-color), var(--primary-color));
            transform: translateY(-2px);
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
        }
        
        /* 响应式调整 */
        @media (max-width: 991.98px) {
            .sidebar {
                width: 70px;
                text-align: center;
            }
            
            .sidebar .nav-link span {
                display: none;
            }
            
            .sidebar .nav-link i {
                margin-right: 0;
                font-size: 1.2rem;
            }
            
            .sidebar-header h3 {
                display: none;
            }
            
            .sidebar-header .logo-small {
                display: block !important;
            }
            
            .main-content {
                margin-left: 70px;
            }
        }
        
        @media (max-width: 767.98px) {
            .sidebar {
                width: 100%;
                height: auto;
                position: relative;
            }
            
            .sidebar .nav {
                display: flex;
                flex-wrap: nowrap;
                overflow-x: auto;
                padding-bottom: 10px;
            }
            
            .sidebar .nav-link {
                padding: 10px 15px;
                margin: 0 5px;
                white-space: nowrap;
            }
            
            .sidebar .nav-link span {
                display: none;
            }
            
            .main-content {
                margin-left: 0;
            }
        }
        
        /* 用户下拉菜单 */
        .user-dropdown {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 15px;
            background: rgba(0, 0, 0, 0.1);
        }
        
        .user-dropdown .dropdown-menu {
            width: 100%;
            margin-top: 10px;
            border: none;
            border-radius: 5px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
    </style>
    {% block styles %}{% endblock %}
</head>
<body>
    <!-- 侧边栏 -->
    <div class="sidebar">
        <div class="sidebar-header">
            <h3 class="mb-0">
                <i class="fas fa-water me-2"></i>
                <span>万岛潜水管理</span>
            </h3>
            <div class="logo-small d-none">
                <i class="fas fa-water"></i>
            </div>
        </div>
        
        <ul class="nav flex-column mt-4">
            <li class="nav-item">
                <a class="nav-link {% if request.endpoint == 'main.admin_dashboard' %}active{% endif %}" href="{{ url_for('main.admin_dashboard') }}">
                    <i class="fas fa-tachometer-alt"></i>
                    <span>控制面板</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link {% if request.endpoint == 'main.admin_users' %}active{% endif %}" href="{{ url_for('main.admin_users') }}">
                    <i class="fas fa-users"></i>
                    <span>用户管理</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link {% if request.endpoint == 'main.admin_courses' %}active{% endif %}" href="{{ url_for('main.admin_courses') }}">
                    <i class="fas fa-graduation-cap"></i>
                    <span>课程管理</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link {% if request.endpoint == 'main.admin_coaches' %}active{% endif %}" href="{{ url_for('main.admin_coaches') }}">
                    <i class="fas fa-user-tie"></i>
                    <span>教练管理</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link {% if request.endpoint == 'main.admin_bookings' %}active{% endif %}" href="{{ url_for('main.admin_bookings') }}">
                    <i class="fas fa-calendar-check"></i>
                    <span>预约管理</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link {% if request.endpoint == 'main.admin_activities' %}active{% endif %}" href="{{ url_for('main.admin_activities') }}">
                    <i class="fas fa-calendar-alt"></i>
                    <span>活动管理</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link {% if request.endpoint == 'main.admin_posts' %}active{% endif %}" href="{{ url_for('main.admin_posts') }}">
                    <i class="fas fa-newspaper"></i>
                    <span>文章管理</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link {% if request.endpoint == 'main.admin_settings' %}active{% endif %}" href="{{ url_for('main.admin_settings') }}">
                    <i class="fas fa-cog"></i>
                    <span>网站设置</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{{ url_for('main.index') }}" target="_blank">
                    <i class="fas fa-home"></i>
                    <span>查看网站</span>
                </a>
            </li>
        </ul>
        
        <div class="user-dropdown">
            <div class="dropdown">
                <a class="nav-link dropdown-toggle text-white" href="#" id="userDropdown" role="button" data-bs-toggle="dropdown">
                    <i class="fas fa-user-circle me-2"></i>
                    <span>{{ current_user.username }}</span>
                </a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="{{ url_for('main.profile') }}">个人资料</a></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item" href="{{ url_for('main.logout') }}">退出</a></li>
                </ul>
            </div>
        </div>
    </div>
    
    <!-- 主内容区域 -->
    <div class="main-content">
        <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
            <h1 class="h2">{% block page_title %}控制面板{% endblock %}</h1>
            <div class="btn-toolbar mb-2 mb-md-0">
                {% block page_actions %}{% endblock %}
            </div>
        </div>
        
        <!-- 消息提示 -->
        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                    <div class="alert alert-{{ category if category != 'message' else 'info' }} alert-dismissible fade show">
                        {{ message }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                {% endfor %}
            {% endif %}
        {% endwith %}
        
        {% block content %}{% endblock %}
    </div>

    <!-- 使用国内CDN -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
    <script src="{{ url_for('static', filename='js/script.js') }}"></script>
    {% block scripts %}{% endblock %}
</body>
</html> 